<template>
  <view>
    <u-popup
      :show="show"
      mode="bottom"
      :closeable="true"
      :round="10"
      @close="close"
    >
      <view class="popDialog">
        <view class="title">
          <view class="font-36 text-bold" style="color: #00a35c"
            >绑定电子档案</view
          >
          <view class="font-24 c-a4">填写您的信息绑定档案</view>
          <image
            :src="$util.img('image/health_8.png')"
            mode=""
            class="icon"
          ></image>
        </view>
        <view class="boxPanel flex-between">
          <view class="text-bold">姓名</view>
          <input
            type="text"
            v-model="name"
            placeholder="请输入姓名"
            placeholder-class="inputs"
            class="text-right"
          />
        </view>

        <view class="boxPanel flex-between">
          <view class="text-bold">手机号</view>
          <input
            type="tel"
            v-model="mobile"
            maxlength="11"
            placeholder="请输入手机号"
            placeholder-class="inputs"
            class="text-right"
          />
        </view>

        <view class="boxPanel flex-between">
          <view class="text-bold flex-y-center"
            >身份证<text class="c-origin">（选填）</text></view
          >
          <input
            type="idcard"
            v-model="idCard"
            placeholder="请输入身份证号"
            placeholder-class="inputs"
            class="text-right"
          />
        </view>

        <view style="height: 120rpx"></view>
        <view class="footer fixfooter">
          <view class="submit" @click="submit"> 立即绑定 </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  name: "file",
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      name: "",
      mobile: "",
      idCard: "",
      loading: false,
    };
  },
  created() {
    if (uni.getStorageSync("userInfo")) {
      this.mobile = uni.getStorageSync("userInfo").mobile;
    }
  },

  methods: {
    close() {
      this.$emit("close");
    },
    submit() {
      if (!this.name) {
        uni.showToast({ title: "请输入姓名", icon: "none" });
        return;
      }
      if (!this.mobile || this.mobile.length !== 11) {
        uni.showToast({ title: "请输入正确的手机号", icon: "none" });
        return;
      }
      // if (!/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(this.idCard)) {
      //   uni.showToast({ title: '请输入正确的身份证号', icon: 'none' })
      //   return
      // }

      this.loading = true;

      this.$api.sendRequest({
        url: "/api/userHealth/setProfile",
        data: {
          name: this.name,
          mobile: this.mobile,
          credt: this.idCard,
        },
        success: (res) => {
          if (res.code == 0) {
            uni.showToast({ title: "绑定成功" });
            this.$emit("confirm");
            this.close();
          } else {
            this.loading = false;
            this.$util.showToast({ title: res.message });
          }
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.popDialog {
  width: 100%;
  padding: 40rpx 0;
  border-radius: 20rpx 20rpx 0 0;
  box-sizing: border-box;
  background: linear-gradient(
    180deg,
    #daffef 0%,
    #f1f6f4 28.999999999999996%,
    #f7f7f7 44%
  );
  // 顶部
  .title {
    position: relative;
    margin: 0 24rpx 0;
    .icon {
      position: absolute;
      top: 0;
      right: 0;
      width: 215rpx;
      height: 163rpx;
    }
  }
  .boxPanel {
    padding: 40rpx 24rpx;
    .inputs {
      font-size: 28rpx;
      color: #b5b9c7;
    }
    .txt {
      font-size: 32rpx;
      font-weight: bold;
    }
  }
}
textarea {
  height: 100rpx;
}
.footer2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24rpx;
  box-sizing: border-box;
  .submit {
    width: 265rpx;
    height: 86rpx;
    line-height: 86rpx;
    text-align: center;
    background-color: $color-title2;
    color: #fff;
    border-radius: 40rpx;
  }
}
</style>
